body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
	margin: 0;
	padding: 0;
}
body,
button,
input,
select,
textarea {
	font: 12px/1.5tahoma, arial, \5b8b\4f53;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
}
address,
cite,
dfn,
em,
var {
	font-style: normal;
}
code,
kbd,
pre,
samp {
	font-family: couriernew, courier, monospace;
}
small {
	font-size: 12px;
}
ul,
ol {
	list-style: none;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
sup {
	vertical-align: text-top;
}
sub {
	vertical-align: text-bottom;
}
legend {
	color: #000;
}
fieldset,
img {
	border: 0;
}
button,
input,
select,
textarea {
	font-size: 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 我的css样式 */

/* 1px边框 */

@mixin border-b-1px($bg) {
	position: relative;
	&:after {
		content: '';
		position: absolute;
		height: 1px;
		background: $bg;
		left: 0;
		right: 0;
		bottom: 0;
		@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
			transform: scaleY(0.7);
		}
		@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
			transform: scaleY(0.5);
		}
		@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
			transform: scaleY(0.3);
		}
	}
}

@mixin border-t-1px($bg) {
	position: relative;
	&:before {
		content: '';
		position: absolute;
		height: 1px;
		background: $bg;
		left: 0;
		right: 0;
		top: 0;
		@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
			transform: scaleY(0.7);
		}
		@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
			transform: scaleY(0.5);
		}
		@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
			transform: scaleY(0.3);
		}
	}
}

@mixin border-l-1px($bg) {
	position: relative;
	&:before {
		content: '';
		position: absolute;
		height: 100%;
		background: $bg;
		width: 1px;
		left: 0;
		right: 0;
		bottom: 0;
		@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
			transform: scaleX(0.7);
		}
		@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
			transform: scaleX(0.5);
		}
		@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
			transform: scaleX(0.3);
		}
	}
}

.border-l-1px {
	@include border-l-1px(#999);
}

html {
	height: 100%;
	width: 100%;
}
body {
	height: 100%;
	background: #f7f7f7;
}

$rem: 50;
.wrapper {
	height: 100%;
	overflow: hidden;
	position: relative;
	text-align: center;
	.input_content {
		border: none;
		outline: none;
		line-height: 40rem / $rem;
		font-size: 20rem / $rem;
		width: 300rem / $rem;
		height: 30rem / $rem;
		margin: 30rem / $rem auto;
		padding: 10rem / $rem 0;
		border-radius: 10rem / $rem;
		text-indent: 1em;
		color: #000;
		text-align: left;
		font-family: Arial, Helvetica, sans-serif;
		position: relative;
		&:before {
			content: '¥';
			position: absolute;
			font-size: 30px;
			left: 10px;
			top: 20px;
			width: 20rem / $rem;
			height: 20rem / $rem;
			background: #f00;
		}
	}
	.keyboard_ctn {
		background: #fff;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -320rem / $rem;
		h3 {
			font-size: 10rem / $rem;
			text-align: center;
			padding: 6rem / $rem 0;
			font-weight: normal;
			padding-left: 34rem / $rem;
			color: #999;
			@include border-b-1px(#999);
			@include border-t-1px(#999);
			overflow: hidden;
			span {
				width: 18px;
				height: 10px;
				background: url('../img/down.png') no-repeat center center;
				background-size: 140%;
				float: right;
				margin: {
					right: 20rem / $rem;
					top: 4rem / $rem;
				}
			}
		}
		.keyboard_bd {
			width: 100%;
			margin: 0;
			display: flex;
			flex-wrap: wrap;
			li {
				@include border-b-1px(#999);
				width: 125rem / $rem;
				font-family: Arial;
				font-weight: 100;
				line-height: 50rem / $rem;
				font-size: 24rem / $rem;
				text-align: center;
				&:nth-of-type(10),
				&:nth-of-type(12) {
					background: #dadada;
				}
				&:nth-of-type(12) {
					background: #dadada url(../img/del.png) no-repeat center center;
					background-size: 30rem / $rem 30rem / $rem;
				}
				&.clicked {
					background: #dcdcdc !important;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
				}
			}
		}
	}
}

/* 密码框布局css */

.veryCode_input {
	position: relative;
	left: 0;
	right: 0;
	margin: 0.6rem auto;

	table {
		position: absolute;
		z-index: 1;
		left: 50%;
		top: 50%;
		right: 0;
		bottom: 0;
		margin-left: -130rem / $rem;
		margin-top: 50rem / $rem;
		text-align: center;
		tr {
			td {
				font-size: 22px !important;
				width: 42px;
				height: 38px;
				border-top: 1px solid #999;
				border-bottom: 1px solid #999;
				border-left: 1px solid #999;

				input {
					width: 42px;
					height: 38px;
					text-align: center;
					border: none;
					border-radius: 0px;
					outline: none;
				}
				&:last-child {
					border-right-width: 1px;
					border-right-color: #999;
					border-right-style: solid;
				}
			}
		}
	}
}

/* index3密码框css */

.veryCode_input2 {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	margin: 0;
	text-align: center;
	.very_table_ctn {
		width: 90%;
		height: 200rem / $rem;
		background: #fff;
		margin: 100rem / $rem auto;
		border-radius: 10rem / $rem;
		text-align: center;
		overflow: hidden;
		h6{
			font-size:18rem/$rem;
			margin: 10rem/$rem auto 30rem/$rem;
			vertical-align: middle;
			overflow: hidden;
			text-indent:-1.8em;
			font-weight: normal;
			.close{
				width:30rem/$rem;
				height: 30rem/$rem;
				background: url(../img/close.png) no-repeat center center;
				display: inline-block;
				background-size: 70%;
				float:left;
				margin-left:20rem/$rem;
			}
		}
		table {
			margin: 0 auto;
			padding-top:200rem/$rem;
			tr {
				td {
					font-size: 22px !important;
					width: 50rem/$rem;
					height: 50rem/$rem;
					border-top: 1px solid #999;
					border-bottom: 1px solid #999;
					border-left: 1px solid #999;
					input {
						width: 45rem/$rem;
						height: 45rem/$rem;
						text-align: center;
						border: none;
						border-radius: 0px;
						outline: none;
					}
					&:last-child {
						border-right-width: 1px;
						border-right-color: #999;
						border-right-style: solid;
					}
				}
			}
		}
	}
}
